/* 面板全局设置 */

@max-depth: 16; // 最大深度


// 多级缩进
.tree-indent(@base-root, @interval: 1em, @depth: @max-depth) {

    // 添加 1 级辅助线
    .indent(@base, @interval, @depth) {
        >li.b3-list-item {
            >.b3-list-item__toggle {
                padding-left: calc(@base-root + @interval * @depth) !important;
            }
        }
    }

    // 递归添加辅助线
    .subtree(@base-root, @interval, @depth, @index: 0) when (@index < @depth) {
        >ul {
            .indent(@base-root, @interval, @index);
            .subtree(@base-root, @interval, @depth, (@index + 1));
        }
    }

    ul.b3-list {
        // 设置前 16 级的样式
        .subtree(@base-root, @interval, @depth);
    }
}

// 多级辅助线
.tree-guides(@base-root, @interval: 1em, @depth: @max-depth) {

    // 添加 1 级辅助线
    .guides(@base, @interval, @depth) {
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: calc(@base + @interval * @depth);
            width: var(--custom-list-guides-line-width);
            height: 100%;
            // background-color: white;
            background-color: var(--custom-list-guides-line-color);
            z-index: 1;
        }
    }

    // 递归添加辅助线
    .subtree(@base-root, @interval, @depth, @index: 0) when (@index < @depth) {
        >ul {
            .guides(@base-root, @interval, @index);
            .subtree(@base-root, @interval, @depth, (@index + 1));
        }
    }

    // absolute 定位需要上级元素使用 absolute 或 relative 定位方法
    ul {
        position: relative;
        top: 0;
        left: 0;
    }

    ul.b3-list {
        // 设置前 16 级的样式
        .subtree(@base-root, @interval, @depth);

        // 鼠标悬浮更改辅助线颜色
        ul:hover::before {
            background-color: var(--b3-theme-primary-lighter);
        }
    }
}

// 移动端侧边分栏
#sidebar {
    .b3-list--mobile {
        >[data-type ^="sidebar"] {
            .tree-indent(30px);

            &:not([data-type="sidebar-file"]) {
                .tree-guides(23px, 1rem);
            }
        }
    }
}

// 桌面端侧边分栏
[data-type='wnd'][data-id] {
    min-height: 0%;
    margin: var(--custom-panel-distance);
    border-radius: var(--custom-border-radius);

    /* 侧边分栏面板 */
    .file-tree.fn__flex-column {
        .tree-indent(18px);

        &:not(.sy__file, .sy__tag, .sy__outline) {
            // .tree-guides(16px, 14px);
            .tree-guides(12px);
        }

        &.sy__tag,
        &.sy__outline {
            &:hover {
                // .tree-guides(16px, 14px);
                .tree-guides(12px);
            }
        }

        // 文档树面板
        // .sy__file {
        // }
    }
}

/* 悬浮面板与面板标题栏 */
.block__popover,
.layout-tab-container {
    .block__icons {
        height: var(--custom-panel-title-height);
        min-height: var(--custom-dock-width);

        .counter {
            /* 计数器 */
            margin: 0;
            color: var(--b3-theme-on-background);
            background-color: transparent;
            outline: 1px solid;
        }

        .b3-text-field {
            /* 关键字过滤 */
            // background-color: transparent;
            line-height: 22px;
        }
    }

    .plugin-sample__custom-tab {
        background-color: unset;
    }
}

.layout-tab-container {
    .layout__tab--active {
        .block__icons {
            /* 焦点所在面板的标题栏 */
            background-color: var(--b3-list-hover);
        }
    }
}

/* 设置标签页面板 */
.config__tab-container {
    background-color: transparent;
}
